<template>
  <ul>
    <TodoItem
      v-for="(todo, index) in filteredTodos"
      :key="index"
      :todo="todo"
      :index="index"
      @toggle-completed="toggleCompleted"
      @remove-todo="removeTodo"
    />
  </ul>
</template>

<script lang="ts">
import { defineComponent, type PropType, computed } from 'vue';
import TodoItem from './TodoItem.vue';

interface Todo {
  text: string;
  completed: boolean;
}

export default defineComponent({
  name: 'TodoListDisplay',
  components: { TodoItem },
  props: {
    todos: {
      type: Array as PropType<Todo[]>,
      required: true
    },
    filter: {
      type: String as PropType<'all' | 'active' | 'completed'>,
      required: true
    }
  },
  emits: ['toggle-completed', 'remove-todo'],
  setup(props, { emit }) {
    const filteredTodos = computed(() => {
      if (props.filter === 'active') {
        return props.todos.filter(todo => !todo.completed);
      } else if (props.filter === 'completed') {
        return props.todos.filter(todo => todo.completed);
      }
      return props.todos;
    });

    const toggleCompleted = (index: number) => {
      emit('toggle-completed', index);
    };

    const removeTodo = (index: number) => {
      emit('remove-todo', index);
    };

    return { filteredTodos, toggleCompleted, removeTodo };
  }
});
</script>